<template>
  <a-drawer
    :width="550"
    :visible="visible"
    @ok="handleOk"
    :footer="false"
    @cancel="
      () => {
        emit('update:visible', false);
      }
    "
    unmountOnClose
  >
    <template #title> 我的签章 </template>

    <a-row :span="24" :gutter="20">
      <a-col :span="3.5" v-for="(item, index) in listData" :key="index">
        <a-card
          @click="selected(item)"
          :style="{
            width: '220px',
            borderRadius: '10px',
            marginBottom: '10px',
          }"
          hoverable
          style=""
          type="card-gutter"
        >
          <template #cover>
            <div style="height: 200px; width: 100%">
              <a-image
                fit="contain"
                height="100%"
                width="100%"
                :preview="false"
                :src="item.seal_path"
              />
            </div>
          </template>
          <a-card-meta :title="item.seal_name" description=""> </a-card-meta>
          <div style="margin-top: 10px">
            <a-tag>
              <template #icon>
                <icon-tag />
              </template>
              {{ item.seal_code }}
            </a-tag>
            <a-tag
              color="green"
              v-if="item.seal_state === 1"
              style="margin-top: 7px"
              >启用</a-tag
            >
            <a-tag color="danger" v-if="item.seal_state === 2">禁用</a-tag>
            <a-tag
              color="orange"
              v-if="item.seal_type === 1"
              style="margin-top: 7px; margin-left: 5px"
              >印章</a-tag
            >
            <a-tag
              color="arcoblue"
              v-if="item.seal_type === 2"
              style="margin-top: 7px; margin-left: 5px"
              >签名</a-tag
            >
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script setup>
  import { ref, onMounted, onUnmounted, watch } from 'vue';
  import useLoading from '@/hooks/loading';
  import { seallist } from '@/api/seal';
  const emit = defineEmits(['update:visible', 'selected']);
  const props = defineProps({
    visible: Boolean,
    params: Object,
  });
  const formType = ref([
    {
      name: 'seal_code',
      label: '印章编号',
      type: 'a-input',
      fieldProps: {
        span: 12,
      },
    },
    {
      name: 'seal_name',
      label: '印章名称',
      type: 'a-input',
      fieldProps: {
        span: 12,
      },
    },
    {
      label: '印章类型',
      name: 'seal_type',
      type: 'a-select',
      fieldProps: {
        span: 12,
      },
      selectOptions: [
        {
          value: 1,
          label: '印章',
        },
        {
          value: 2,
          label: '签名',
        },
      ],
    },
    {
      label: '印章状态',
      name: 'seal_state',
      slotName: 'status',
      type: 'a-select',
      fieldProps: {
        span: 12,
      },
      selectOptions: [
        {
          status: 'success',
          value: 1,
          label: '启用',
        },
        {
          status: 'danger',
          value: 2,
          label: '禁用',
        },
      ],
    },
  ]);
  const { loading, setLoading } = useLoading();
  const handleOk = () => {};
  const page_no = ref(1);
  const listData = ref();
  function request() {
    loading.value = true;
    seallist({
      page_no: page_no.value,
      page_size: 1000,
    })
      .then((res) => {
        listData.value = res.data.list;
        res.data.list.forEach((item) => {
          item.seal_path = import.meta.env.VITE_FILE_PATH + item.seal_path;
        });
      })
      .finally(() => {
        loading.value = false;
      });
  }
  onMounted(() => {
    request();
  });
  const handleSubmit = () => {
    request();
  };
  const selected = (item) => {
    emit('update:visible', false);
    emit('selected', item.seal_path);
  };
</script>

<style scoped lang="less">
  .icon-hover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: all 0.1s;
  }
  .icon-hover:hover {
    background-color: rgb(var(--gray-2));
  }
  .esignCenter {
    padding: 20px;
  }

  .signature {
    background-color: #e9ecfc;
    border-radius: 5px;
  }
  .clear_a {
    cursor: pointer;
    position: absolute;
    right: 15px;
    bottom: 10px;
  }
</style>
